<template>
	<div class="common-defect">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addDefect">新增缺陷</el-button>
				<el-input v-model="searchDesc" placeholder="搜索缺陷描述" style="width: 200px; margin-left: 10px" clearable />
				<el-select v-model="searchType" placeholder="筛选检测项类型" style="width: 200px; margin-left: 10px" clearable>
					<el-option label="物理检测" value="物理检测" />
					<el-option label="化学检测" value="化学检测" />
					<el-option label="微生物检测" value="微生物检测" />
				</el-select>
			</div>

			<el-table :data="filteredDefects" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="defectId" label="编号" sortable></el-table-column>
				<el-table-column prop="description" label="缺陷描述" sortable></el-table-column>
				<el-table-column prop="type" label="检测项类型" sortable></el-table-column>
				<el-table-column prop="level" label="缺陷等级" sortable></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editDefect(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteDefect(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="缺陷信息" width="500px">
			<el-form :model="currentDefect" label-width="120px">
				<el-form-item label="编号">
					<el-input v-model="currentDefect.defectId" />
				</el-form-item>
				<el-form-item label="缺陷描述">
					<el-input v-model="currentDefect.description" />
				</el-form-item>
				<el-form-item label="检测项类型">
					<el-select v-model="currentDefect.type" placeholder="选择检测项类型">
						<el-option label="物理检测" value="物理检测" />
						<el-option label="化学检测" value="化学检测" />
						<el-option label="微生物检测" value="微生物检测" />
					</el-select>
				</el-form-item>
				<el-form-item label="缺陷等级">
					<el-select v-model="currentDefect.level" placeholder="选择缺陷等级">
						<el-option label="高" value="高" />
						<el-option label="中" value="中" />
						<el-option label="低" value="低" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveDefect">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const defects = ref([
	{ defectId: 'DEF001', description: '包装破损', type: '物理检测', level: '高' },
	{ defectId: 'DEF002', description: '含量不达标', type: '化学检测', level: '高' },
	{ defectId: 'DEF003', description: '异物混入', type: '微生物检测', level: '中' },
])

for (let i = 4; i <= 15; i++) {
	defects.value.push({
		defectId: `DEF00${i}`,
		description: `缺陷描述${i}`,
		type: i % 3 === 0 ? '物理检测' : (i % 3 === 1 ? '化学检测' : '微生物检测'),
		level: i % 3 === 0 ? '高' : (i % 3 === 1 ? '中' : '低')
	})
}

const searchDesc = ref('')
const searchType = ref('')
const dialogVisible = ref(false)
const currentDefect = ref({})

// 筛选
const filteredDefects = computed(() =>
	defects.value.filter(d =>
		(!searchDesc.value || d.description.includes(searchDesc.value)) &&
		(!searchType.value || d.type === searchType.value)
	)
)

// 新增缺陷
const addDefect = () => {
	currentDefect.value = { defectId: '', description: '', type: '', level: '' }
	dialogVisible.value = true
}

// 编辑缺陷
const editDefect = (row) => {
	currentDefect.value = { ...row }
	dialogVisible.value = true
}

// 保存缺陷
const saveDefect = () => {
	if (!currentDefect.value.defectId || !currentDefect.value.description) {
		ElMessage.error('编号和缺陷描述不能为空')
		return
	}
	const index = defects.value.findIndex(d => d.defectId === currentDefect.value.defectId)
	if (index >= 0) {
		defects.value[index] = { ...currentDefect.value }
		ElMessage.success('缺陷已更新')
	} else {
		defects.value.push({ ...currentDefect.value })
		ElMessage.success('缺陷已新增')
	}
	dialogVisible.value = false
}

// 删除缺陷
const deleteDefect = (row) => {
	ElMessageBox.confirm('确认删除该缺陷记录吗？', '提示', { type: 'warning' })
		.then(() => {
			defects.value = defects.value.filter(d => d.defectId !== row.defectId)
			ElMessage.success('缺陷已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.common-defect .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
